<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			canvas{
				background: #272822;
				position: relative;
			}
		</style>
	</head>
	<body>
		
		<canvas id='canvas' width='900' height='500'></canvas>
		<script>
			//获得画板
			var canvas=document.getElementById('canvas');
			//获得绘画环境
			var cv=canvas.getContext('2d');
			
			//开启路径
			cv.beginPath();
			
			//定义笔触开始的地方
			cv.moveTo(150,150);
			//定义扇形的路径
			cv.arc(150,150,100,0*Math.PI/180,60*Math.PI/180);
			
			//指定填充颜色
			cv.fillStyle='yellow';
			cv.fill();
			
				//开启路径
			cv.beginPath();
			
			//定义笔触开始的地方
			cv.moveTo(150,150);
			//定义扇形的路径
			cv.arc(150,150,100,60*Math.PI/180,160*Math.PI/180);
			
			//指定填充颜色
			cv.fillStyle='blue';
			cv.fill();
			
				//开启路径
			cv.beginPath();
			
			//定义笔触开始的地方
			cv.moveTo(150,150);
			//定义扇形的路径
			cv.arc(150,150,100,160*Math.PI/180,270*Math.PI/180);
			
			//指定填充颜色
			cv.fillStyle='green';
			cv.fill();
			
				//开启路径
			cv.beginPath();
			
			//定义笔触开始的地方
			cv.moveTo(150,150);
			//定义扇形的路径
			cv.arc(150,150,100,270*Math.PI/180,360*Math.PI/180);
			
			//指定填充颜色
			cv.fillStyle='orangered';
			cv.fill();
		</script>
	</body>
</html>
